import React,{FC} from "react";
import { Link, useNavigate } from "react-router-dom";
import { LOGIN_PATHNAME } from "../../router";
import { useRequest } from "ahooks";
import { getUserInfoService } from "../../service/user";
import { UserOutlined } from "@ant-design/icons";
import { Button, message } from "antd";
import { removeToken } from "../../utils/user-token";
import  useGetUserInfo from "../../hooks/useGetUserInfo";
import { useDispatch } from "react-redux";
import { logoutReducer } from "../../store/userReducer";

const UserInfo:FC = () => {
  const nav = useNavigate()
  // const { data } = useRequest(getUserInfoService)
  // const { username, nickname } = data || {}

  const dispatch = useDispatch()

  const { username, nickname } = useGetUserInfo()

  function logout() {
    dispatch(logoutReducer()) //清空redux user数据
    removeToken() //清除token存储
    message.success("退出成功")
    nav(LOGIN_PATHNAME)
  }
  const UserInfo = (
    <>
      <span style={{color: '#e8e8e8'}}>
        <UserOutlined/>
        {nickname}
      </span>
      <Button type="link" onClick={logout}>退出</Button>
    </>
  )
  const login = (
    <Link to={LOGIN_PATHNAME}>登录</Link>
  )
  return (
    <>
      {username ? UserInfo : login}
    </>
  )
}

export default UserInfo;